<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜单列表</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__ADMIN_STATIC__/css/oksub.css">
  <script type="text/javascript" src="__STATIC__/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
  <!--数据表格-->
  <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="__STATIC__/lib/layui/layui.js"></script>
<script>
    layui.use(["element", "table", "okLayer", "okUtils", "okMock","tree"], function () {
        let table = layui.table;
        let util = layui.util;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        okLoading.close();
        util.fixbar({});


        let articleTable = table.render({
            elem: '#tableId',
            url: "{:url('menu/list')}",
            limit: 20,
            page: true,
            size: "sm",
            even: true,
            toolbar: "#toolbarTpl",
            cols: [[
                {type: "checkbox", fixed: "left"},
                {field: "id", title: "ID", width: 100, fixed: "left"},
                {field: "name", title: "权限名称", width: 150},
                {field: "parent_id", title: "菜单级别", width: 150, templet: "#parentTpl"},
                {field: "route", title: "路由", width: 180, templet: "#routeTpl"},
                {field: "icon", title: "图标", width: 150, templet: "#iconTpl"},
                {field: "sort", title: "排序", width: 100},
                {field: "type", title: "类型", width: 100, templet: "#typeTpl"},
                {field: "create_time", title: "创建时间", width: 180},
                {field: "update_time", title: "创建时间", width: 180},
                {title: "操作", width: 100, templet: "#operationTpl", align: "center", fixed: "right"}
            ]],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });

        table.on("toolbar(tableFilter)", function (obj) {
            //批量删除
            if(obj.event === "batchDel"){
                batchDel();
            }
            //清理缓存
            if(obj.event === "clear"){
                clear();
            }
            //添加
            if(obj.event === "add"){
                add();
            }
        });

        table.on("tool(tableFilter)", function (obj) {
            let data = obj.data;

            //删除
            if (obj.event === "del" ) {
                del(data.id);
            }
            //编辑
            if (obj.event === "edit" ) {
                edit(data.id);
            }
        });


        //批量删除
        function batchDel() {
            okLayer.confirm("确定要批量删除吗？", function (index) {
                layer.close(index);
                var idsStr = okUtils.tableBatchCheck(table);
                if (idsStr) {
                    okUtils.ajax("{:url('menu/batchDel')}", "delete", {ids: idsStr}, true).done(function (response) {
                        console.log(response);
                        okUtils.tableSuccessMsg(response.msg);
                    }).fail(function (error) {
                        console.log(error)
                    });
                }
            });
        }

        //清理缓存
        function clear() {
            okLayer.confirm("确定要清空缓存吗？", function (index) {
                layer.close(index);
                okUtils.ajax("{:url('menu/clear')}", "post", null, true).done(function (response) {
                    layer.msg(response.msg,{icon:1});
                }).fail(function (error) {
                    console.log(error)
                });
            });
        }

        //添加
        function add() {
            okLayer.open("添加菜单", "{:url('menu/create')}", "90%", "90%", null, function () {
                articleTable.reload();
            })
        }

        //编辑
        function edit(id){
            okLayer.open("修改菜单", "{:url('menu/edit')}?id="+id, "90%", "90%", null, function () {
                articleTable.reload();
            })
        }

        //删除
        function del(id) {
            okLayer.confirm("确定要删除吗？", function () {
                okUtils.ajax("{:url('menu/delete')}", "delete", {id: id}, true).done(function (response) {
                    console.log(response);
                    okUtils.tableSuccessMsg(response.msg);
                }).fail(function (error) {
                    console.log(error)
                });
            })
        }


    })
</script>


<!-- 级别模板 -->
<script type="text/html" id="parentTpl">
  {{#  if(d.parent_id > 0){ }}
  <span class="layui-btn layui-btn-normal layui-btn-xs">子菜单</span>
  {{#  } else { }}
  <span class="layui-btn layui-btn-warm layui-btn-xs">父菜单</span>
  {{#  } }}
</script>

<!-- 级别模板 -->
<script type="text/html" id="iconTpl">
  <i class="layui-icon">{{ d.icon }}</i>
</script>

<!-- 类型模板 -->
<script type="text/html" id="typeTpl">
  {{#  if(d.parent_id > 0){ }}
  <span> 同上 </span>
  {{#  } else { }}
    {{# if(d.type > 1){ }}
    <span class="layui-btn layui-btn-normal layui-btn-xs">后端</span>
    {{# } else { }}
    <span class="layui-btn layui-btn-warm layui-btn-xs">前端</span>
    {{# } }}
  {{#  } }}
</script>

<!-- 类型模板 -->
<script type="text/html" id="routeTpl">
  {{#  if(!d.submenus){ }}
  <span>{{ d.route }}</span>
  {{#  } else { }}
  <span> - </span>
  {{#  } }}
</script>

<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
  <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
  <a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>


<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="clear">删除缓存</button>
    <button class="layui-btn layui-btn-sm" lay-event="add">添加菜单</button>
  </div>
</script>



</body>
</html>
